<template>
  <div id="app">
    <button @click="$refs.lineage.render()">render</button>
    <button @click="handleChange">change</button>
    <Lineage 
      ref="lineage" 
      :source="source" 
      :types="types"
      upstream="upstream"
      downstream="downstream"
      @click="handleClick"/>
  </div>
</template>

<script>
import Lineage from './components/index.js'
// data
import types from './mock/types'
import source from './mock/source-simple.js'

export default {
  name: 'app',
  components: {
    Lineage
  },
  data () {
    return {
      source: null,
      types: types
    }
  },
  created () {
    this.queryData()
  },
  methods: {
    queryData () {
      setTimeout(() => {
        this.source = source
      }, 200);
    },
    handleChange () {
      this.source.downstream.push({
        data: {
          type: 'dam_resource_type_2',
          name: 'Dynamic addition',
          icon: 'database',
          iconColor: 'red'
        }
      })
    },
    handleClick (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0;
}
#app {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  height: 800px;
}
</style>
